<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
	<style type="text/css">
	/*左右固定，中间自适应*/
		#content{
			background: #ff6;
		}
		#left{
			width: 200px;
			height: 200px;
			background: #ccc;
			float: left;
		}
		#middle{
			float: left;
			width: 100%;
			height: 200px;
			margin: 0 -200px;
		}
		#right{
			width: 200px;
			height: 200px;
			background: #ccc;
			float: right;
		}

	/*浮动元素居中*/
	    .box{
	    	float: left;
	    	position: relative;
	    	left: 50%;
	    }
	    .box p{
            float: left;
            position: relative;
            right: 50%;
	    }

	/*两栏自适应布局，右侧div宽高不确定*/
        .main,.bar{
        	height: 300px;
        	/*color: #000;*/
        	text-align: center;
        }
        .main{
        	width: 100%;
        	float: left;
        }
        .main .content{
        	margin-left: 200px;
        	background: red;
        }
        .bar{
        	width: 200px;
        	float: left;
        	margin-left: -100%;
        	background: green;
        }
	</style>
</head>
<body>
     <!-- 左栏固定200px，右栏固定200px，中间自适应 -->
     <div id="content" class="clearfix">
     	<div id="left"></div>
     	<div id="middle"></div>
     	<div id="right"></div>
     </div>
     <!-- 如何实现浮动元素居中 -->
     <div class="box">
     	<p>我是浮动的</p>
     	<p>我是居中的</p>
     </div>
     <!-- 两栏自适应布局，右侧div宽高不确定 -->
     <div class="main">
     	<div class="content">右侧自适应区域</div>
     </div>
     <div class="bar">左侧定宽200px</div>
</body>
</html>